<template>
  <view class="warp" :style="themeStyleVar">
    <view :style="{'padding-top':`${navBarConf.titleBarHeight + navBarConf.statusBarHeight}px`}">
      <view class="content">

        <view class="content-item martb">
          <view class="content-item__title">
            <span>每日适宜饮水量:</span>
          </view>
          <view class="content-item__result">{{ result }}</view>
        </view>

        <view class="content-item martb">
          <view class="flex-box martb">
            <view>体重:</view>
              <input v-model="weight" type="digit" maxlength="8" class="tag-input" cursor-spacing="24px" placeholder="请输入您的体重" @input="replaceWeight">
            <view>KG（公斤）</view>
          </view>
          <p class="tips martb">喝多少水和体重有一定的关系，但也必须视每个人所处环境（温度、湿度）、运动量、身体健康情况及食物摄取量等而定。每日饮水量计算器适用在温暖的气候中测试估算。结果仅供参考。</p>
        </view>

      </view>

      <view class="knowledge">
        <view class="knowledge-item martb">
          <p class="knowledge-item__title">喝水最佳时间</p>
          <view class="knowledge-item__content">
            <p class="tag-p">1.早上起床后先喝杯水，让身体开始新的工作。</p>
            <p class="tag-p">2.到办公室后先别急着喝咖啡，给自己喝一杯温开水。</p>
            <p class="tag-p">3.上午10点左右喝一杯水，补充工作流汗和排尿失水</p>
            <p class="tag-p">4.午餐后半小时喝一杯水，加强身体的消化能力。</p>
            <p class="tag-p">5.下午4点左右喝一次水，促进肠道蠕动。</p>
            <p class="tag-p">6.下班离开办公室前喝一杯水增加饱足感。</p>
            <p class="tag-p">7.20点左右喝水能冲淡血液，利于血液循环。</p>
            <p class="tag-p">8.活动后，不论活动量大小都应该喝水。</p>
            <p class="tag-p">9.喝水不会发胖，当你节食减肥时，要保证体内水分充足。</p>
            <p class="tag-p">10.发烧的时候体温上升使水分流失，多喝温水使身体散热。</p>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      weight: '' // 体重
    }
  },
  computed: {
    navBarConf() { return this.$store.getters.getNavBarConf }, // 获取设备头部安全区和标题高度
    themeStyleVar() { return this.$store.getters.getThemeStyleVar }, // 当前主题色卡变量
    result() { return this.weight > 0 ? ` ${parseInt(this.weight * 33)} ～ ${parseInt(this.weight * 40)} CC（毫升）` : '请输入正确的体重～' }
  },
  onLoad(option) {
      // #ifdef MP-WEIXIN
      wx.showShareMenu({
        withShareTicket: true,
        menus: ['shareAppMessage', 'shareTimeline']
      })
      // #endif
  },
  // #ifdef MP-WEIXIN
  onShareAppMessage(res) {
      if (res.from === 'button') {// 来自页面内分享按钮
        console.log(res.target)
      }
      return {
        title: '给您分享个好工具-饮水量计算',
        path: '/pages/tools/drinkingwater'
      }
  },
  // #endif
  methods: {
    // 格式化数字
    replaceWeight(event) {
      const value = event.target.value
      const replaceValue = value.replace(/[^0-9.]+/g, '')
      if (event.detail.value !== replaceValue) {
        // 修改当前value
        event.detail.value = replaceValue
        setTimeout(() => {
          this.weight = replaceValue
        }, 10)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .warp {
    background-color: #FFF;
    min-height: 100vh
  }

  .content {
    @include flex-center();
    flex-flow: column;
    padding: 24rpx;
    border-top: 20rpx solid #F7F7F7;
    box-sizing: border-box;
    font-size: $uni-font-size-base;

    .content-item {
      width: 100%;
      background-color: #FFF;
      border-radius: 16rpx;
      padding: 24rpx;
      box-sizing: border-box;

      .flex-box {
        display: flex;
        align-items: center;
        flex: 1 auto 1;

        .tag-input {
          margin: 0 auto;
          padding: 10rpx 20rpx;
          border-radius: 8rpx;
          font-size: 32rpx;
          line-height: 28rpx;
          color: #2C405A;
          border: 1px solid rgb(26, 115, 232);
          background-color: #FCFCFC;
        }

      }

      &__title {
        margin: 20rpx 0 30rpx;
        display: flex;
        justify-content: space-between;
      }

      &__result {
        margin: 0 auto;
        width: 86%;
        height: 96rpx;
        font-size: 28rpx;
        line-height: 48rpx;
        padding: 20rpx 20rpx;
        border-radius: 8rpx;
        background-color: var(--global-color-400);
        border: 1px dashed var(--global-color-100);
        color: $uni-color-title;
      }
    }

    .btns {
      @include flex-center();
      flex-flow: column;
      width: 100%;

      .btn-item {
        @include flex-center();
        width: 86%;
        height: 80rpx;
        color: #FFF;
        border-radius: 80rpx;
        background-color: var(--global-color-100);
      }
    }
  }

  .knowledge {
    padding: 0 24rpx;
    box-sizing: border-box;
    font-size: $uni-font-size-base;
    padding-bottom: calc(24rpx + constant(safe-area-inset-bottom));
    padding-bottom: calc(24rpx + env(safe-area-inset-bottom));

    .knowledge-item {
      padding-top: 50rpx;

      &__title {
        font-size: $uni-font-size-lg;
        color: $uni-color-title;
        padding: 10rpx 0;
        display: flex;
        align-items: center;

        .icon-zhishiku {
          font-size: 40rpx;
          color: var(--global-color-100);
          margin-right: 20rpx;
        }
      }

      &__content {
        font-size: $uni-font-size-sm;
        color: $uni-color-paragraph;
        line-height: 42rpx;

        .tag-p {
          text-indent: $uni-font-size-sm * 2;
          @extend .martb;
        }
      }
    }
  }

  .tips {
    // padding: 0 20rpx;
    box-sizing: border-box;
    line-height: 36rpx;
    font-size: $uni-font-size-mini;
    color: #888;
  }

  .martb {
    margin: 20rpx 0;
  }
</style>
